<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>99论文助手 - 专业论文工具导航平台</title>
  <meta name="description" content="99论文助手提供专业的论文工具导航，包括写作辅助、查重检测、翻译工具、文献管理、数据分析等工具，助力学术研究">
  
  <!-- 外部CSS库 -->
  <script src="css/tailwindcss.js"></script>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义CSS -->
  <link rel="stylesheet" href="css/style.css">
  
  <!-- Tailwind 配置 -->
  <script src="js/tailwind-config.js"></script>
  
  <!-- 共用导航栏组件 -->
  <script src="js/navbar.js"></script>
  <script src="js/footer.js"></script>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col">
  
  <!-- 导航栏将通过 navbar.js 动态加载 -->

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    
    <!-- 页面标题区域 -->
    <section class="max-w-6xl mx-auto mb-12">
      <div class="text-center mb-8">
        <!-- ========== 轮播胶囊图 开始 ========== -->
        <!-- 可以注释这整块来隐藏轮播图 -->
        <div class="flex justify-center mb-6 px-4" style="animation: fadeInUp 0.5s ease-out both;">
          <div id="tools-carousel-capsule" class="relative overflow-hidden rounded-full shadow-lg w-full max-w-[420px] h-[60px]">
            <!-- 轮播项容器 -->
            <div id="tools-carousel-track" class="flex transition-transform duration-500 ease-in-out h-full">
              <!-- 轮播项 1 -->
              <div class="carousel-item flex-shrink-0 flex items-center justify-center px-4 sm:px-6 w-full h-[60px] relative" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <div class="absolute inset-0 bg-black bg-opacity-20 rounded-full"></div>
                <i class="fa fa-gift text-white text-xl sm:text-2xl mr-2 sm:mr-3 flex-shrink-0 relative z-10 drop-shadow-lg"></i>
                <span class="text-white font-bold text-sm sm:text-lg whitespace-nowrap overflow-hidden text-ellipsis relative z-10 drop-shadow-lg">🎉 写论文认准向阳丨微信：L99007700</span>
              </div>
              
              <!-- 轮播项 2 -->
              <div class="carousel-item flex-shrink-0 flex items-center justify-center px-4 sm:px-6 w-full h-[60px] relative" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <div class="absolute inset-0 bg-black bg-opacity-20 rounded-full"></div>
                <i class="fa fa-star text-white text-xl sm:text-2xl mr-2 sm:mr-3 flex-shrink-0 relative z-10 drop-shadow-lg"></i>
                <span class="text-white font-bold text-sm sm:text-lg whitespace-nowrap overflow-hidden text-ellipsis relative z-10 drop-shadow-lg">⭐ 热门工具：目录解析、图表生成</span>
              </div>
              
              <!-- 轮播项 3 -->
              <div class="carousel-item flex-shrink-0 flex items-center justify-center px-4 sm:px-6 w-full h-[60px] relative" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <div class="absolute inset-0 bg-black bg-opacity-20 rounded-full"></div>
                <i class="fa fa-rocket text-white text-xl sm:text-2xl mr-2 sm:mr-3 flex-shrink-0 relative z-10 drop-shadow-lg"></i>
                <span class="text-white font-bold text-sm sm:text-lg whitespace-nowrap overflow-hidden text-ellipsis relative z-10 drop-shadow-lg">🚀 效率提升：一键复制、快速导出</span>
              </div>
            </div>
            
            <!-- 指示器 -->
            <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
              <div class="tools-carousel-indicator w-2 h-2 rounded-full bg-white opacity-50 cursor-pointer transition-all" data-index="0"></div>
              <div class="tools-carousel-indicator w-2 h-2 rounded-full bg-white opacity-50 cursor-pointer transition-all" data-index="1"></div>
              <div class="tools-carousel-indicator w-2 h-2 rounded-full bg-white opacity-50 cursor-pointer transition-all" data-index="2"></div>
            </div>
          </div>
        </div>
        <!-- ========== 轮播胶囊图 结束 ========== -->
        
        <div style="animation: fadeInUp 0.6s ease-out both;">
          <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-3">
            99论文<span class="text-primary">工具导航</span>
          </h2>
          <p class="text-gray-600 text-lg max-w-2xl mx-auto">
            专业论文工具导航平台，涵盖写作、查重、翻译、文献管理、数据分析等全流程工具
          </p>
        </div>
      </div>
      
      <!-- 快速搜索 -->
      <div class="relative max-w-2xl mx-auto mb-8" style="animation: fadeInUp 0.6s ease-out 0.1s both;">
        <div class="relative">
          <i class="fa fa-search absolute left-5 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
          <input 
            type="text" 
            id="tools-search" 
            placeholder="搜索论文工具..." 
            class="w-full pl-14 pr-4 py-4 rounded-full border-2 border-gray-200 focus:border-primary focus:outline-none transition-all text-lg shadow-soft"
          />
        </div>
      </div>

      <!-- 工具分类标签 -->
      <div class="flex flex-wrap justify-center gap-3 mb-8" style="animation: fadeInUp 0.6s ease-out 0.2s both;">
        <button class="tool-category-btn active px-6 py-2 rounded-full bg-primary text-white font-medium transition-all hover:shadow-lg hover:bg-primary-dark min-w-[120px] flex items-center justify-center" data-category="all">
          <i class="fa fa-th mr-2"></i>全部工具
        </button>
        <button class="tool-category-btn px-6 py-2 rounded-full bg-white text-gray-700 font-medium transition-all hover:shadow-lg hover:bg-gray-50 min-w-[120px] flex items-center justify-center" data-category="写作辅助">
          <i class="fa fa-edit mr-2"></i>写作辅助
        </button>
        <button class="tool-category-btn px-6 py-2 rounded-full bg-white text-gray-700 font-medium transition-all hover:shadow-lg hover:bg-gray-50 min-w-[120px] flex items-center justify-center" data-category="查重检测">
          <i class="fa fa-check-circle mr-2"></i>查重检测
        </button>
        <button class="tool-category-btn px-6 py-2 rounded-full bg-white text-gray-700 font-medium transition-all hover:shadow-lg hover:bg-gray-50 min-w-[120px] flex items-center justify-center" data-category="翻译工具">
          <i class="fa fa-language mr-2"></i>翻译工具
        </button>
        <button class="tool-category-btn px-6 py-2 rounded-full bg-white text-gray-700 font-medium transition-all hover:shadow-lg hover:bg-gray-50 min-w-[120px] flex items-center justify-center" data-category="文献管理">
          <i class="fa fa-book mr-2"></i>文献管理
        </button>
        <button class="tool-category-btn px-6 py-2 rounded-full bg-white text-gray-700 font-medium transition-all hover:shadow-lg hover:bg-gray-50 min-w-[120px] flex items-center justify-center" data-category="数据分析">
          <i class="fa fa-line-chart mr-2"></i>数据分析
        </button>
      </div>
    </section>

    <!-- 工具卡片网格 -->
    <section class="max-w-6xl mx-auto" style="animation: fadeInUp 0.6s ease-out 0.3s both;">
      <div id="tools-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 工具卡片将通过JavaScript动态生成 -->
      </div>

      <!-- 空状态 -->
      <div id="empty-state" class="hidden text-center py-20">
        <i class="fa fa-search text-gray-300 text-6xl mb-4"></i>
        <p class="text-gray-500 text-xl mb-2">未找到相关工具</p>
        <p class="text-gray-400">试试其他关键词或分类</p>
      </div>
    </section>

  </main>

  <!-- 页脚 -->
  <div id="footer-container"></div>

  <!-- JavaScript -->
  <script src="js/tools.js"></script>
</body>
</html>

